<%--
  Created by IntelliJ IDEA.
  User: 旧人
  Date: 2018/12/16
  Time: 12:18
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜单信息</title>
    <script type="text/javascript" src="/resources/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <script type="text/javascript" src="/resources/layui/layui.js"></script>
    <script>
        layui.use('layer', 'form', function () {
            var layer = layui.layer;
            var form = layui.form;
            $ = layui.jquery;

        });


        function clickDelete(id) {
            //删除按钮
            layer.confirm('确认删除当前信息么', function (index) {
                location.href = "/DelPMenuInfo?menuId=" + id;
            });
        }

        function editMenu(menuId,menuPid,name,menuHref){
            layer.open({
                type : 1,
                title : "修改菜单信息",
                closeBtn : 2,
                area : [ '450px', '250px' ],
                offset : 'auto',
                shadeClose : true,
                content : $("#edit-menu"),
                success : function(layero, index) {

                    $("#editMenuId").val(menuId);
                    $("#editMenuPid").val(menuPid);
                    $("#editMenuName").val(name);
                    $("#editMenuHref").val(menuHref);
                },
                end : function() {
                    location.reload();
                }
            });
        }
    </script>
</head>
<body>


<div class="layui-col-xs12 layui-col-sm6 layui-col-md6"
     style="width: 750px">
    <div class="layui-collapse" style="width: 750px">
        <div class="layui-colla-item" style="width: 750px">
            <h2 class="layui-colla-title" style="width: 700px">菜单列表</h2>
            <div class="layui-colla-content layui-show" style="width: 700px">

                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col width="100">
                        <col width="150">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>菜单名称</th>
                        <th>菜单链接</th>
                        <th>操作</th>
                    </thead>
                    <tbody>
                    <c:forEach var="item" items="${menuList}">
                        <tr>
                            <td>${item.name}</td>
                            <td>${item.menuHref}</td>
                            <td><a class="layui-btn layui-btn-xs layui-btn-small" target="listRole"
                                   onclick="editMenu('${item.menuId}','${item.menuPid}','${item.name}','${item.menuHref}')">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-small"
                                   onclick="clickDelete('${item.menuId}')">删除</a></td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
</div>


<!-- 修改表单 -->
<div id="edit-menu" style="display: none;">
    <form class="layui-form" id="edit-form" action="/updatePMenuInfo" method="post">

        <input type="hidden" name="menuId" id="editMenuId" value=""/>
        <input type="hidden" name="menuPid" id="editMenuPid" value=""/>

        <div class="layui-form-item center">
            <label class="layui-form-label" style="width: 100px">菜单名</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="editMenuName" required value=""
                       style="width: 240px" lay-verify="required" placeholder="请输入菜单名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">菜单链接 </label>
            <div class="layui-input-block">
                <input type="text" name="menuHref" id="editMenuHref" required style="width: 240px"
                       lay-verify="required" placeholder="菜单链接" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save"
                        onclick="editMenuInfo()">立即提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary"
                        id="closeBtn">重置
                </button>
            </div>
        </div>
    </form>
</div>
</body>
</html>